<template>
  <div class="productPromotion-box">
    <el-form ref="ruleFormRef" :model="form" label-width="120px">
      <el-form-item label="赠送积分：" prop="giftPoint">
        <el-input v-model="form.giftPoint" />
      </el-form-item>
      <el-form-item label="赠送成长值：" prop="giftGrowth">
        <el-input v-model="form.giftGrowth" />
      </el-form-item>
      <el-form-item label="积分购买限制：" prop="usePointLimit">
        <el-input v-model="form.usePointLimit" />
      </el-form-item>

      <el-form-item label="预告商品：" prop="previewStatus">
        <el-switch
          v-model="form.previewStatus"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="商品上架：" prop="publishStatus">
        <el-switch
          v-model="form.publishStatus"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="商品推荐：" prop="newStatus">
        <el-switch
          active-text="新品"
          v-model="form.newStatus"
          active-value="1"
          inactive-value="0"
        />
        <el-switch
          active-text="推荐"
          v-model="form.recommandStatus"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>

      <el-form-item label="服务保证：" prop="productSn">
        <el-checkbox @change="serviceIds[0] = !serviceIds[0] ? '1' : ''"
          >无忧退货</el-checkbox
        >
        <el-checkbox @change="serviceIds[1] = !serviceIds[1] ? '2' : ''"
          >快速退货</el-checkbox
        >
        <el-checkbox @change="serviceIds[2] = !serviceIds[2] ? '3' : ''"
          >免费包邮</el-checkbox
        >
      </el-form-item>
      <el-form-item label="详情页标题：" prop="detailTitle">
        <el-input v-model="form.detailTitle" />
      </el-form-item>
      <el-form-item label="详情页描述：" prop="detailDesc">
        <el-input v-model="form.detailDesc" />
      </el-form-item>
      <el-form-item label="商品关键字：" prop="keywords">
        <el-input v-model="form.keywords" />
      </el-form-item>
      <el-form-item label="商品备注：" prop="note">
        <el-input v-model="form.note" />
      </el-form-item>
      <el-form-item label="选择优惠方式：" prop="unit">
        <el-radio-group
          v-model="form.promotionType"
          label="size control"
          size="small"
        >
          <el-radio-button :label="0">无优惠</el-radio-button>
          <el-radio-button :label="1">特惠促销</el-radio-button>
          <el-radio-button :label="2">会员价格</el-radio-button>
          <el-radio-button :label="3">阶梯价格</el-radio-button>
          <el-radio-button :label="4">满减价格</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="promotiontime" v-show="form.promotionType === 1">
        <el-form-item label="开始时间:">
          <el-date-picker
            v-model="form.promotionStartTime"
            type="date"
            placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker
            v-model="form.promotionEndTime"
            type="date"
            placeholder="选择结束时间"
          />
        </el-form-item>
        <el-form-item label="促销价格:">
          <el-input
            v-model="form.promotionPrice"
            placeholder="输入促销价格"
            style="width: 218px"
          />
        </el-form-item>
      </el-form-item>

      <el-form-item class="promotiontime" v-show="form.promotionType === 2">
        <el-form-item label="黄金会员:">
          <el-input v-model="form.memberPriceList[0].memberPrice" />
        </el-form-item>
        <el-form-item label="白金会员:">
          <el-input v-model="form.memberPriceList[1].memberPrice" />
        </el-form-item>
        <el-form-item label="钻石会员:">
          <el-input v-model="form.memberPriceList[2].memberPrice" />
        </el-form-item>
      </el-form-item>

      <!-- 阶梯价格 -->
      <el-form-item v-show="form.promotionType === 3">
        <el-table
          :data="form.productLadderList"
          style="width: 80%"
          table-layout="auto"
          cell-class-name="align-c"
          header-row-class-name="align-c"
          border
        >
          <el-table-column prop="count" label="数量" width="120">
            <template #default="{ row }">
              <el-input v-model="row.count" />
            </template>
          </el-table-column>

          <el-table-column prop="discount" label="折扣" width="120">
            <template #default="{ row }">
              <el-input v-model="row.discount" />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="{ $index }">
              <el-button
                text
                type="primary"
                size="small"
                @click="del(form.productLadderList, $index)"
                style="padding-left: 0; padding-right: 0"
                >删除</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="add(form.productLadderList)"
                style="padding-left: 0; padding-right: 0"
                >添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <!-- 满减价格 -->
      <el-form-item v-show="form.promotionType === 4">
        <el-table
          :data="form.productFullReductionList"
          style="width: 80%"
          table-layout="auto"
          cell-class-name="align-c"
          header-row-class-name="align-c"
          border
        >
          <el-table-column prop="fullPrice" label="满减" width="120">
            <template #default="{ row }">
              <el-input v-model="row.fullPrice" />
            </template>
          </el-table-column>

          <el-table-column prop="reducePrice" label="立减" width="120">
            <template #default="{ row }">
              <el-input v-model="row.reducePrice" />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="{ $index }">
              <el-button
                text
                type="primary"
                size="small"
                @click="del(form.productFullReductionList, $index)"
                style="padding-left: 0; padding-right: 0"
                >删除</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                style="padding-left: 0; padding-right: 0"
                @click="add(form.productFullReductionList)"
                >添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button @click="active = 0"> 上一步，填写商品信息 </el-button>

        <el-button type="primary" @click="submitForm(ruleFormRef)">
          下一步，填写商品促销
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { type } from "os";

const active = inject<any>("active");
const all = inject<any>("all");
type List = {
  count?: number;
  discount?: number;
  price?: number;
  fullPrice?: number;
  reducePrice?: number;
};
const add = (list: List[]) => {
  if (list.length <= 2) {
    if (form.productLadderList === list) {
      list.push({
        count: 0,
        discount: 0,
        price: 0,
      });
    } else {
      list.push({ fullPrice: 0, reducePrice: 0 });
    }
  } else {
    ElMessage.warning("最多只能添加三条");
  }
};
const del = (list: any[], index: any) => {
  if (list.length > 1) {
    list.splice(index, 1);
  }
};

const ruleFormRef = ref<FormInstance>();
const serviceIds = ref<any>([]); // 服务保证
const form = reactive<any>({
  giftPoint: 0, // 赠送积分
  giftGrowth: 0, // 赠送成长值
  usePointLimit: 0, // 积分购买限制
  previewStatus: 0, // 预告商品
  publishStatus: 0, // 商品上架
  newStatus: 0, // 商品推荐 新品
  recommandStatus: "", // 推荐状态 推荐
  detailTitle: "", // 详情页标题
  detailDesc: "", // 详情页描述
  keywords: "", // 商品关键字
  note: "", // 商品备注
  promotionType: 0, //促销类型
  promotionStartTime: "", // 促销开始时间
  promotionEndTime: "", // 促销结束时间
  promotionPrice: null, // 促销价格
  memberPriceList: [
    {
      memberLevelId: 1,
      memberLevelName: "黄金会员",
      memberPrice: null,
    },
    {
      memberLevelId: 2,
      memberLevelName: "白金会员",
      memberPrice: null,
    },
    {
      memberLevelId: 3,
      memberLevelName: "钻石会员",
      memberPrice: null,
    },
  ],
  productLadderList: [
    {
      count: 0,
      discount: 0,
      price: 0,
    },
  ],
  productFullReductionList: [
    {
      fullPrice: 0,
      reducePrice: 0,
    },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      active.value = 2;
      const p = serviceIds.value.filter((s: string) => s !== "");
      Object.assign(all, form, { serviceIds: p.join(",") });
    } else {
      ElMessage.error("验证失败");
    }
  });
};
</script>

<style scoped lang="less">
.productPromotion-box {
  padding: 20px;
  margin-right: 80px;
  :deep(.align-c) {
    .cell {
      text-align: center !important;
    }
  }
  :deep(.promotiontime) {
    .el-form-item {
      margin-top: 10px;
    }
  }
}
</style>
